<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/shipinbofang.js"></script>
		<link rel="stylesheet" href="css/shipinbofang.css" />
	</head>
	<style>
		.container {
			width: 1000px;
		}
		
		.commentbox {
			width: 900px;
			margin: 20px auto;
		}
		
		.mytextarea {
			width: 100%;
			overflow: auto;
			word-break: break-all;
			height: 100px;
			color: #000;
			font-size: 1em;
			resize: none;
		}
		
		.comment-list {
			width: 900px;
			margin: 20px auto;
			clear: both;
			padding-top: 20px;
		}
		
		.comment-list .comment-info {
			position: relative;
			margin-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
		}
		
		.comment-list .comment-info header {
			width: 10%;
			position: absolute;
		}
		
		.comment-list .comment-info header img {
			width: 100%;
			border-radius: 50%;
			padding: 5px;
		}
		
		.comment-list .comment-info .comment-right {
			padding: 5px 0px 5px 11%;
		}
		
		.comment-list .comment-info .comment-right h3 {
			margin: 5px 0px;
		}
		
		.comment-list .comment-info .comment-right .comment-content-header {
			height: 25px;
		}
		
		.comment-list .comment-info .comment-right .comment-content-header span,
		.comment-list .comment-info .comment-right .comment-content-footer span {
			padding-right: 2em;
			color: #aaa;
		}
		
		.comment-list .comment-info .comment-right .comment-content-header span,
		.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,
		.send,
		.reply-list-btn {
			cursor: pointer;
		}
		
		.comment-list .comment-info .comment-right .reply-list {
			border-left: 3px solid #ccc;
			padding-left: 7px;
		}
		
		.comment-list .comment-info .comment-right .reply-list .reply {
			border-bottom: 1px dashed #ccc;
		}
		
		.comment-list .comment-info .comment-right .reply-list .reply div span {
			padding-left: 10px;
		}
		
		.comment-list .comment-info .comment-right .reply-list .reply p span {
			padding-right: 2em;
			color: #aaa;
		}
		.ziti {
			color: white;
			font-family: "微软雅黑";
		}
		
		a:hover {
			text-decoration: none;
			color: #00BE06;
		}
		
		a {
			color: #000000;
		}
		
		#button {
			font-family: "微软雅黑";
			font-size: 20px;
			width: 215px;
			height: 45px;
			background: #C59B61;
			border: none;
			margin-top: 20px;
			border-bottom-right-radius: 30px;
			border-top-right-radius: 30px;
			border-bottom-left-radius: 30px;
			border-top-left-radius: 30px;
			outline: none;
		}
		
		.navbar {
			margin-bottom: auto;
			padding-left: 160px;
			height: 65px;
		}
		
		.logo {
			padding: 19px;
		}
		
		.tupian {
			padding-top: 10px;
			position: relative;
			left: -40px;
			bottom: 5px;
		}
		
		.navbar-nav>li>a {
			padding-left: 0px;
			padding-bottom: 20px;
			padding-top: 20px;
		}
		
		.button {
			width: 75px;
			height: 40px;
			border: none;
			margin-top: 2px;
			border-bottom-right-radius: 25px;
			border-top-right-radius: 25px;
			background-color: #00BE06;
			padding-right: 70px;
		}
		
		.button>span {
			position: absolute;
			top: 11px;
			margin-right: 50px;
		}
		
		.dh {
			width: 260px;
			height: 40px;
			border: none;
			background-color: #333333;
			float: left;
			margin-top: 3px;
			border-bottom-left-radius: 25px;
			border-top-left-radius: 25px;
			outline: none;
			opacity: 0.5;
		}
		
		.form-group {
			margin-right: 50px;
		}
		
		#back {
			background-image: url(img/tq-banner-bg@2x.jpg);
			height: 400px;
		}
		
		.toubu1 {
			background-color: black;
			width: 530px;
			height: 24px;
			font-size: 15px;
			position: absolute;
			left: 120px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}
		
		.toubu2 {
			background-color: black;
			width: 390px;
			height: 24px;
			font-size: 15px;
			position: absolute;
			left: 185px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}
		
		.toubu1 a {
			font-size: 13px;
			color: white;
			margin-left: 16px;
			padding-left: 5px;
		}
		
		.toubu2 a {
			font-size: 13px;
			color: white;
			margin-left: 16px;
			padding-left: 5px;
		}
		
		.toubu1 a:hover {
			color: #C8A06A;
			text-decoration: none;
		}
		
		.toubu2 a:hover {
			color: #C8A06A;
			text-decoration: none;
		}
		
		.huangjin1 {
			color: #E3BA77;
			font-size: 40px;
			font-weight: 400;
		}
		
		.huangjin2 {
			color: #FFEFD7;
			font-size: 40px;
			font-weight: 400;
		}
		
		.xiaozi1 {
			position: absolute;
			color: #E3BA77;
			font-size: 20px;
			top: 95px;
			right: 30px;
		}
		
		.xiaozi2 {
			position: absolute;
			color: #D6BE97;
			font-size: 20px;
			top: 85px;
			right: -8px;
		}
		
		.an1 {
			border-radius: 100px;
			width: 165px;
			height: 35px;
			position: absolute;
			top: 165px;
			left: 170px;
			color: #E3BA77;
			background-color: transparent;
			font-size: 18px;
			border-color: #E3BA77;
		}
		
		.an2 {
			border-radius: 100px;
			width: 165px;
			height: 35px;
			position: absolute;
			top: 165px;
			left: 225px;
			color: #D6BE97;
			background-color: transparent;
			font-size: 18px;
			border-color: #D6BE97;
		}
		
		.dfk {
			background-color: #F9F9F9;
			width: 260px;
			height: 125px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
		
		.dfk:hover {
			background-color: saddlebrown;
		}
		
		.banquan a {
			color: #000000;
		}
		
		.banquan a:hover {
			text-decoration: none;
			color: #E3BA77;
		}
		
		.VIP {
			position: absolute;
			min-width: 185px;
			padding-top: 14px;
			left: -82px;
			margin-top: 14px;
		}
		
		.denglu {
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			color: white;
			background-color: #C8A06A;
			border: none;
			margin-left: 50px;
		}
	</style>

	<body>
		<nav class="navbar navbar-inverse">

			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="logo" href="index.html"><img src="img/2019-12-09_083755.png" class="tupian"></a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">

						<li>
							<a href="DianShiJu.html">电视剧</a>
						</li>
						<li>
							<a href="#">电影</a>
						</li>
						<li>
							<a href="ReSouBang.html">热搜榜</a>
						</li>
						
					</ul>
					<form class="navbar-form navbar-left" role="search">

						<div class="form-group">
							<input type="text" placeholder="木鱼" style="color: white; padding-left: 15px;" class="dh">
							<button class="input-group-addon glyphicon glyphicon-search button" id="basic-addon1"><span>搜全网</span></button>
						</div>
					</form>

					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<div class="t" style="position: relative;bottom: 25px;right: 20px;"><img src="img/2019-12-14_113538.png" class="vipchatu" />
								<ul class="dropdown-menu VIP">
									<li>
										<a href="vip1.html">
											<p><img src="img/10e25c7db4664aeea5f3650a7962d722.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>了解VIP会员特权</p>
										</a>
									</li>
									<li>
										<a href="vip2.html">
											<p><img src="img/4e2e4b297d294926b025d86b8b619d85.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>领取VIP会员福利</p>
										</a>
									</li>
									<li>
										<a href="vip3.html">
											<p><img src="img/fe1d5f33d4034eb0ab61a7abf0ce222f.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>做任务，领奖励</p>
										</a>
									</li>
									<li>
										<a href="#">
											<button class="denglu" onclick="btn1()">登录</button>
										</a>
									</li>
								</ul>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="q" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-cloud-upload ac" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="shangchuan">上传</div>
								</div>
							</a>
						</li>
						<li>
							<a href="KeHuDuan.html">
								<div class="w" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-blackboard kh" aria-hidden="true" style="position: relative;left: 14px;"></div>
									<div class="kehu">客户端</div>
								</div>
							</a>

						</li>
						<li>

							<a href="#">
								<div class="e" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-bell xx" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="xiaoxi">消息</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="r" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-dashboard kg" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="kanguo">看过</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#"><img src="img/2019-12-15_173518.png " class="rentou" style="position: relative;bottom: 8px;" /></a>
						</li>
					</ul>
				</div>
		</nav>
		
		<section class="public_width" style="position: relative;top: -16px;">
			<dl class="video_con">
				<dt class="video_con_title">姜子牙电影预告</dt>
				<figure class="video_con_show tab">
					<div class="video_bofang tab-box">
						<div class="video_con_show_con">
							<video width="900" height="630" controls>
								<source src="img/shipin1.mp4" type="video/mp4">
							</video>
						</div>

					</div>
					<figcaption class="video_show_zs">
						<div class="video_show_zj">
							<img class="video_show_zj_img" src="img/jiangziya1.jpg">
							<p class="video_show_zj_js">
								<b class="video_show_zj_name">姜子牙</b>
								<span class="video_show_zj_zc" style="font-size: 15px;">2020年大年初一热血上映，国产神话宇宙第二弹</span>
							</p>
						</div>
						<span class="video_show_title">播放列表</span>
						<ul class="video_show_con tab-menu">
							<li class="video_show_list"><img src="img/4562.jfif"><span>西游记之大圣归来</span></li>
							<li class="video_show_list"><img src="img/6444.jfif"><span>天谕</span></li>
							<li class="video_show_list"><img src="img/987.jpg"><span>墓王之王</span></li>
							<li class="video_show_list"><img src="img/753951.jfif"><span>哪吒之魔童降世</span></li>
							<li class="video_show_list"><img src="img/159753.jpg"><span>斗罗大陆之绝世唐门</span></li>
							<li class="video_show_list"><img src="img/12345678.jpg"><span>天行九歌</span></li>
							<li class="video_show_list"><img src="img/156446.jpg"><span>卷思量</span></li>
							<li class="video_show_list"><img src="img/45494.jpg"><span>星辰变</span></li>
							<li class="video_show_list"><a href="#">查看更多...</a></li>
						</ul>
					</figcaption>
				</figure>
			</dl>
			</section>
			<!--评论区-->
			<div class="container">
				<div class="commentbox">
					<textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
					<div class="btn btn-info pull-right" id="comment">评论</div>
				</div>
				<div class="comment-list">

					<div class="comment-info">
						<header><img src="./img/1574913794.png"></header>
						<div class="comment-right">
							<h3>匿名</h3>
							<div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i> 2017-10-17 11:42:53</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div>
							<p class="content">mongodb 副本集配置副本集概念：就我的理解就是和主从复制 差不多，就是在主从复制的基础上多加了一个选举的机制。 复制集 特点：数据一致性 主是唯一的，没有Mysql 那样的双主结构大多数原则，集群存活节点小于二分之一是集群不可写， 只可读从库无法写入数据自动容灾通过下面的一个图来简单的了解下 配置过程：一、安装mongodb安装过程略，不懂得可以看前面的教程二、创建存储目录与配置文件创...
							</p>
							<div class="comment-content-footer">
								<div class="row">
									<div class="col-md-10">
										<span><i class="glyphicon glyphicon-pushpin"></i> 来自:win10 </span><span><i class="glyphicon glyphicon-globe"></i> chrome 55.0.2883.87</span>
									</div>
									<div class="col-md-2"><span class="reply-btn">回复</span></div>
								</div>
							</div>
							<div class="reply-list"></div>
						</div>
					</div>

					<div class="comment-info">
						<header><img src="./img/1574913962.png"></header>
						<div class="comment-right">
							<h3>匿名</h3>
							<div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i> 2017-10-17 11:42:53</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div>
							<p class="content">mongodb 副本集配置副本集概念：就我的理解就是和主从复制 差不多，就是在主从复制的基础上多加了一个选举的机制。 复制集 特点：数据一致性 主是唯一的，没有Mysql 那样的双主结构大多数原则，集群存活节点小于二分之一是集群不可写， 只可读从库无法写入数据自动容灾通过下面的一个图来简单的了解下 配置过程：一、安装mongodb安装过程略，不懂得可以看前面的教程二、创建存储目录与配置文件创...
							</p>
							<div class="comment-content-footer">
								<div class="row">
									<div class="col-md-10">
										<span><i class="glyphicon glyphicon-pushpin"></i> 来自:win10 </span><span><i class="glyphicon glyphicon-globe"></i> chrome 55.0.2883.87</span>
									</div>
									<div class="col-md-2"><span class="reply-btn">回复</span></div>
								</div>
							</div>
							<div class="reply-list">
								<div class="reply">
									<div>
										<a href="javascript:void(0)">匿名</a>:
										<a href="javascript:void(0)">@匿名</a><span>这写的是什么鬼东西。。。。</span></div>
									<p><span>2017-10-17 11:42:53</span> <span class="reply-list-btn">回复</span></p>
								</div>
								<div class="reply">
									<div>
										<a href="javascript:void(0)">匿名</a>:
										<a href="javascript:void(0)">@匿名</a><span>这写的是什么鬼东西。。。。</span></div>
									<p><span>2017-10-17 11:42:53</span> <span class="reply-list-btn">回复</span></p>
								</div>
								<div class="reply">
									<div>
										<a href="javascript:void(0)">匿名</a>:
										<a href="javascript:void(0)">@匿名</a><span>这写的是什么鬼东西。。。。</span></div>
									<p><span>2017-10-17 11:42:53</span> <span class="reply-list-btn">回复</span></p>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		
		<div class="container" style="padding-top: 30px; padding-bottom: 30px; background-color:#F8F8F8; width: 100%;">
			<div class="row">
				<div class="col-md-12 text-center">
					<div>
						<a href="#">公司介绍</a>|
						<a href="#">新闻动态</a>|
						<a href="#">联系方式</a>|
						<a href="#">招聘英才</a>|
						<a href="#">爱奇艺实验室</a>|
						<a href="#">开放平台</a>|
						<a href="#">爱奇艺号认证</a>|
						<a href="#">爱奇艺号</a>|
						<a href="#">爱奇艺会员合作</a>|
						<a href="#">帮助中心</a>|
						<a href="#">侵权举报与投诉</a>|
						<a href="#">用户协议</a>|
					</div>
					<p>隐私政策|
						<a href="#">About Us</a>
					</p>
					<p>
						<a href="#">反盗版和反盗链权利声明</a>&ensp;Copyright © 2019 爱奇艺 All Rights Reserved</p>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.comment.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//初始化数据
			var arr = [{
					id: 1,
					img: "./img/1574913025.png",
					replyName: "帅大叔",
					beReplyName: "匿名",
					content: "同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",
					time: "2017-10-17 11:42:53",
					address: "深圳",
					osname: "",
					browse: "谷歌",
					replyBody: []
				},
				{
					id: 2,
					img: "./img/1574913858.png",
					replyName: "匿名",
					beReplyName: "",
					content: "到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”",
					time: "2017-10-17 11:42:53",
					address: "深圳",
					osname: "",
					browse: "谷歌",
					replyBody: [{
						id: 3,
						img: "",
						replyName: "帅大叔",
						beReplyName: "匿名",
						content: "来啊，我们一起吃鸡",
						time: "2017-10-17 11:42:53",
						address: "",
						osname: "",
						browse: "谷歌"
					}]
				},
				{
					id: 3,
					img: "./img/1574913938.png",
					replyName: "帅大叔",
					beReplyName: "匿名",
					content: "同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",
					time: "2017-10-17 11:42:53",
					address: "深圳",
					osname: "win10",
					browse: "谷歌",
					replyBody: []
				}
			];
			$(function() {
				$(".comment-list").addCommentList({
					data: arr,
					add: ""
				});
				$("#comment").click(function() {
					var obj = new Object();
					obj.img = "./img/1574913875.png";
					obj.replyName = "匿名";
					obj.content = $("#content").val();
					obj.browse = "深圳";
					obj.osname = "win10";
					obj.replyBody = "";
					$(".comment-list").addCommentList({
						data: [],
						add: obj
					});
				});
			})
		</script>
	</body>

</html>